<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<!--
胡文 qq:986776
 *自定义代码生成器
-->
    <meta charset="UTF-8">
    <title>UsUser信息</title>
     <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css"></link>
    <script src="/js/jquery.min.js" ></script>
    <script src="/js/vue3.js" ></script>
      <script type="text/javascript" src="/js/bootstrap.bundle.min.js"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="app" class="container">
  <!--查询模块-->
<div class="row" >
  <div class="col-12 text-right">
    <form class="form-group form-inline justify-content-end">
    <input class="form-control w-50 mr-sm-2" type="search" v-model="usUser.str" placeholder="请输入查询字符">
    <button class="btn btn-outline-success " @click.prevent="load()">查询</button>
    </form>
  </div>
</div>  <!--查询模块结束-->
        <table  class="table table-hover table-bordered">
            <tr>
                 <td v-text="'userno'"></td>
                    <td v-text="'username'"></td>
                    <td v-text="'abc'"></td>
                    <td v-text="'createdate'"></td>
                    <td v-text="'address'"></td>
                    <td v-text="'phone'"></td>
                    <td v-text="'smsphone'"></td>
                    <td v-text="'areaid'"></td>
                    <td v-text="'usertype'"></td>
                    <td v-text="'paytype'"></td>
                    <td v-text="'bankname'"></td>
                    <td v-text="'banknum'"></td>
                    <td v-text="'formula'"></td>
                    <td v-text="'usermoney'"></td>
                    <td v-text="'meterid'"></td>
                    <td v-text="'docnum'"></td>
                    <td v-text="'pwd'"></td>
                    <td v-text="'contractnum'"></td>
                    <td v-text="'contractdate'"></td>
                    <td v-text="'volumeid'"></td>
                    <td v-text="'volumeorderindex'"></td>
                    <td v-text="'disabled'"></td>
               </tr>
            <tr   v-for="o in list" >
               <td v-text="o.userno"></td>
               <td v-text="o.username"></td>
               <td v-text="o.abc"></td>
               <td v-text="o.createdate"></td>
               <td v-text="o.address"></td>
               <td v-text="o.phone"></td>
               <td v-text="o.smsphone"></td>
               <td v-text="o.areaid"></td>
               <td v-text="o.usertype"></td>
               <td v-text="o.paytype"></td>
               <td v-text="o.bankname"></td>
               <td v-text="o.banknum"></td>
               <td v-text="o.formula"></td>
               <td v-text="o.usermoney"></td>
               <td v-text="o.meterid"></td>
               <td v-text="o.docnum"></td>
               <td v-text="o.pwd"></td>
               <td v-text="o.contractnum"></td>
               <td v-text="o.contractdate"></td>
               <td v-text="o.volumeid"></td>
               <td v-text="o.volumeorderindex"></td>
               <td v-text="o.disabled"></td>
            </tr>
        </table>
         <!--分页-->
        <!--显示分页信息-->
        <div class="row  text-right">
            <!--文字信息-->
            <div class="col-md-6">
                当前第 <input name="startPage"  :value="pageInfo.pageNum"  style="width: 20px"/>/{{pageInfo.pages}}页.一共 {{pageInfo.total}}条记录
            </div>
            <!--点击分页-->
            <div class="col-md-6">
                <nav aria-label="Page navigation example">
                    <ul class="pagination">
                        <li class="page-item"><a class="page-link" href="javascript:;" @click="pageInfo.pageNum=1;load( )">首页</a></li>
                        <li class="page-item" :class="{'disabled':!pageInfo.hasPreviousPage}">
                            <a class="page-link" href="javascript:;" @click="pageInfo.pageNum=pageInfo.pageNum-1;load()" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li class="page-item" v-for="p in pageInfo.navigatepageNums" :class="{'active':pageInfo.pageNum==p}"><a class="page-link"  href="javascript:;" @click="pageInfo.pageNum=p;load()" v-text="p"></a></li>
                        <li class="page-item" :class="{'disabled':!pageInfo.hasNextPage}">
                            <a class="page-link" href="javascript:;"  @click="pageInfo.pageNum=pageInfo.pageNum-0+1;load()" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        <li class="page-item"><a class="page-link"  href="javascript:;" @click="pageInfo.pageNum=pageInfo.pages;load()">尾页</a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <!--分页结束-->
</div>
<script>
    var app=Vue.createApp({
        data(){
            return  {
                    usUser:{
                       userno:'',
                       username:'',
                       abc:'',
                       createdate:'',
                       address:'',
                       phone:'',
                       smsphone:'',
                       areaid:'',
                       usertype:'',
                       paytype:'',
                       bankname:'',
                       banknum:'',
                       formula:'',
                       usermoney:'',
                       meterid:'',
                       docnum:'',
                       pwd:'',
                       contractnum:'',
                       contractdate:'',
                       volumeid:'',
                       volumeorderindex:'',
                       disabled:'',
                       pageNum:'1',
                     //pageSize:'10' ,
                       str:'',     
                    },
                    list:[],
                    pageInfo:{}
            }
        },methods:{
            load(){
                this.usUser .pageNum=this.pageInfo.pageNum;
                $.getJSON("/usUser/queryByLike2",this.usUser,(json)=>{
                    this.pageInfo=json.data.pageInfo;
                    this.list=json.data.pageInfo.list;
                });
            }
        },mounted(){
            this.load();
        }
    });
    app.mount("#app");
</script>
</body>
</html>
